<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抖音 - 记录美好生活</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- Tailwind 配置 -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#fe2c55", // 抖音红色
              secondary: "#000000",
              "gray-light": "#f5f5f5",
              "gray-dark": "#333333",
            },
            fontFamily: {
              sans: ["PingFang SC", "Helvetica Neue", "Arial", "sans-serif"],
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .text-shadow {
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
        .backdrop-blur {
          backdrop-filter: blur(8px);
        }
      }
    </style>

    <style>
      /* 基础动画 */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .animate-fadeIn {
        animation: fadeIn 0.5s ease-in-out;
      }

      /* 视频进度条动画 */
      @keyframes progress {
        from {
          width: 0%;
        }
        to {
          width: 100%;
        }
      }

      .progress-animation {
        animation: progress 15s linear forwards;
      }

      /* 点赞动画 */
      @keyframes likePulse {
        0% {
          transform: scale(0);
          opacity: 1;
        }
        50% {
          transform: scale(1.2);
          opacity: 0.8;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      .animate-like {
        animation: likePulse 0.5s ease-out;
      }
    </style>
  </head>

  <body class="bg-black text-white overflow-x-hidden font-sans">
    <div class="flex h-screen max-h-screen">
      <!-- 侧边导航 - 桌面版 -->
      <aside
        class="hidden lg:flex flex-col w-20 lg:w-24 bg-black border-r border-gray-800 items-center py-8 space-y-8 h-full fixed left-0 top-0 z-50"
      >
        <div class="text-primary text-3xl font-bold">抖音</div>

        <nav class="flex flex-col items-center space-y-8 flex-1">
          <a href="#" class="flex flex-col items-center text-primary">
            <i class="fa fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
          </a>
          <a
            href="#"
            class="flex flex-col items-center text-gray-400 hover:text-white transition-colors"
          >
            <i class="fa fa-compass text-xl"></i>
            <span class="text-xs mt-1">发现</span>
          </a>
          <a
            href="#"
            class="flex flex-col items-center text-gray-400 hover:text-white transition-colors"
          >
            <i class="fa fa-user-o text-xl"></i>
            <span class="text-xs mt-1">我的</span>
          </a>
        </nav>

        <div
          class="w-10 h-10 rounded-full overflow-hidden border-2 border-gray-700"
        >
          <img
            src="https://picsum.photos/200/200?random=1"
            alt="用户头像"
            class="w-full h-full object-cover"
          />
        </div>
      </aside>

      <!-- 主内容区 -->
      <main class="flex-1 lg:ml-20 lg:ml-24 overflow-hidden relative">
        <!-- 顶部导航 - 移动端 -->
        <header
          class="lg:hidden flex justify-between items-center p-4 bg-black/80 backdrop-blur fixed top-0 left-0 right-0 z-40 border-b border-gray-800"
        >
          <div class="text-primary text-xl font-bold">抖音</div>
          <div class="flex items-center space-x-4">
            <button class="text-white">
              <i class="fa fa-search text-xl"></i>
            </button>
            <div class="w-8 h-8 rounded-full overflow-hidden">
              <img
                src="https://picsum.photos/200/200?random=1"
                alt="用户头像"
                class="w-full h-full object-cover"
              />
            </div>
          </div>
        </header>

        <!-- 视频容器 - 垂直滚动 -->
        <div
          id="video-container"
          class="h-screen overflow-y-scroll scrollbar-hide snap-y snap-mandatory"
        >
          <!-- 视频 1 -->
          <div class="video-item h-screen snap-start relative">
            <!-- 视频背景 -->
            <div class="absolute inset-0 z-0">
              <img
                src="https://picsum.photos/1080/1920?random=10"
                alt="视频封面"
                class="w-full h-full object-cover"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"
              ></div>
            </div>

            <!-- 视频进度条 -->
            <div
              class="absolute top-4 left-4 right-4 h-1 bg-white/30 rounded-full overflow-hidden z-10"
            >
              <div class="h-full bg-primary progress-animation"></div>
            </div>

            <!-- 视频控制区 -->
            <div class="absolute bottom-0 left-0 right-0 p-4 z-20">
              <div class="flex justify-between items-end">
                <!-- 左侧信息 -->
                <div class="flex-1 max-w-xl">
                  <h3 class="font-bold text-lg mb-2 text-shadow">
                    这是一个精彩的抖音视频标题，展示了生活中的美好瞬间
                  </h3>
                  <p class="text-gray-300 text-sm mb-4 flex items-center">
                    <i class="fa fa-music mr-2"></i>
                    背景音乐名称 - 歌手名
                    <button class="ml-2 text-gray-300 hover:text-white">
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                  </p>

                  <div class="flex items-center space-x-3 mb-6">
                    <div
                      class="w-10 h-10 rounded-full overflow-hidden border-2 border-primary"
                    >
                      <img
                        src="https://picsum.photos/200/200?random=2"
                        alt="作者头像"
                        class="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p class="font-medium">用户名</p>
                      <p class="text-xs text-gray-400">
                        账号简介，这里有一些描述文字
                      </p>
                    </div>
                    <button
                      class="ml-4 bg-primary text-white px-4 py-1.5 rounded-full text-sm font-medium hover:bg-primary/90 transition-colors"
                    >
                      关注
                    </button>
                  </div>
                </div>

                <!-- 右侧互动按钮 -->
                <div class="flex flex-col items-center space-y-6 mr-2">
                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-heart-o text-2xl"></i>
                    </div>
                    <span class="text-sm">1.2w</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-comment-o text-2xl"></i>
                    </div>
                    <span class="text-sm">342</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-share text-2xl"></i>
                    </div>
                    <span class="text-sm">56</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-music text-2xl"></i>
                    </div>
                  </button>

                  <div
                    class="w-10 h-10 rounded-full overflow-hidden border-2 border-gray-700 rotate-12"
                  >
                    <img
                      src="https://picsum.photos/200/200?random=3"
                      alt="视频封面"
                      class="w-full h-full object-cover"
                    />
                  </div>
                </div>
              </div>
            </div>

            <!-- 播放按钮 -->
            <div class="absolute inset-0 flex items-center justify-center z-10">
              <button
                id="play-btn"
                class="w-20 h-20 rounded-full bg-primary/80 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity"
              >
                <i class="fa fa-play text-3xl ml-1"></i>
              </button>
            </div>
          </div>

          <!-- 视频 2 -->
          <div class="video-item h-screen snap-start relative">
            <div class="absolute inset-0 z-0">
              <img
                src="https://picsum.photos/1080/1920?random=11"
                alt="视频封面"
                class="w-full h-full object-cover"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"
              ></div>
            </div>

            <div
              class="absolute top-4 left-4 right-4 h-1 bg-white/30 rounded-full overflow-hidden z-10"
            >
              <div class="h-full bg-primary progress-animation"></div>
            </div>

            <div class="absolute bottom-0 left-0 right-0 p-4 z-20">
              <div class="flex justify-between items-end">
                <div class="flex-1 max-w-xl">
                  <h3 class="font-bold text-lg mb-2 text-shadow">
                    旅行vlog：探索未知的美景，记录精彩瞬间
                  </h3>
                  <p class="text-gray-300 text-sm mb-4 flex items-center">
                    <i class="fa fa-music mr-2"></i>
                    旅行的意义 - 轻音乐
                    <button class="ml-2 text-gray-300 hover:text-white">
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                  </p>

                  <div class="flex items-center space-x-3 mb-6">
                    <div
                      class="w-10 h-10 rounded-full overflow-hidden border-2 border-primary"
                    >
                      <img
                        src="https://picsum.photos/200/200?random=4"
                        alt="作者头像"
                        class="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p class="font-medium">旅行博主</p>
                      <p class="text-xs text-gray-400">带你看遍世界美景</p>
                    </div>
                    <button
                      class="ml-4 bg-primary text-white px-4 py-1.5 rounded-full text-sm font-medium hover:bg-primary/90 transition-colors"
                    >
                      关注
                    </button>
                  </div>
                </div>

                <div class="flex flex-col items-center space-y-6 mr-2">
                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-heart text-2xl text-primary"></i>
                    </div>
                    <span class="text-sm">5.8w</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-comment-o text-2xl"></i>
                    </div>
                    <span class="text-sm">1254</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-share text-2xl"></i>
                    </div>
                    <span class="text-sm">892</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-music text-2xl"></i>
                    </div>
                  </button>

                  <div
                    class="w-10 h-10 rounded-full overflow-hidden border-2 border-gray-700 rotate-12"
                  >
                    <img
                      src="https://picsum.photos/200/200?random=5"
                      alt="视频封面"
                      class="w-full h-full object-cover"
                    />
                  </div>
                </div>
              </div>
            </div>

            <div class="absolute inset-0 flex items-center justify-center z-10">
              <button
                class="w-20 h-20 rounded-full bg-primary/80 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity"
              >
                <i class="fa fa-play text-3xl ml-1"></i>
              </button>
            </div>
          </div>

          <!-- 视频 3 -->
          <div class="video-item h-screen snap-start relative">
            <div class="absolute inset-0 z-0">
              <img
                src="https://picsum.photos/1080/1920?random=12"
                alt="视频封面"
                class="w-full h-full object-cover"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"
              ></div>
            </div>

            <div
              class="absolute top-4 left-4 right-4 h-1 bg-white/30 rounded-full overflow-hidden z-10"
            >
              <div class="h-full bg-primary progress-animation"></div>
            </div>

            <div class="absolute bottom-0 left-0 right-0 p-4 z-20">
              <div class="flex justify-between items-end">
                <div class="flex-1 max-w-xl">
                  <h3 class="font-bold text-lg mb-2 text-shadow">
                    美食制作：如何做出完美的家常菜
                  </h3>
                  <p class="text-gray-300 text-sm mb-4 flex items-center">
                    <i class="fa fa-music mr-2"></i>
                    轻松烹饪 - 背景音乐
                    <button class="ml-2 text-gray-300 hover:text-white">
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                  </p>

                  <div class="flex items-center space-x-3 mb-6">
                    <div
                      class="w-10 h-10 rounded-full overflow-hidden border-2 border-primary"
                    >
                      <img
                        src="https://picsum.photos/200/200?random=6"
                        alt="作者头像"
                        class="w-full h-full object-cover"
                      />
                    </div>
                    <div>
                      <p class="font-medium">美食达人</p>
                      <p class="text-xs text-gray-400">
                        分享简单美味的家常菜做法
                      </p>
                    </div>
                    <button
                      class="ml-4 bg-gray-700 text-white px-4 py-1.5 rounded-full text-sm font-medium hover:bg-gray-600 transition-colors"
                    >
                      已关注
                    </button>
                  </div>
                </div>

                <div class="flex flex-col items-center space-y-6 mr-2">
                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-heart-o text-2xl"></i>
                    </div>
                    <span class="text-sm">3.4w</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-comment-o text-2xl"></i>
                    </div>
                    <span class="text-sm">786</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-share text-2xl"></i>
                    </div>
                    <span class="text-sm">432</span>
                  </button>

                  <button class="flex flex-col items-center group">
                    <div
                      class="w-12 h-12 rounded-full bg-black/30 backdrop-blur flex items-center justify-center mb-1 group-hover:bg-primary/20 transition-colors"
                    >
                      <i class="fa fa-music text-2xl"></i>
                    </div>
                  </button>

                  <div
                    class="w-10 h-10 rounded-full overflow-hidden border-2 border-gray-700 rotate-12"
                  >
                    <img
                      src="https://picsum.photos/200/200?random=7"
                      alt="视频封面"
                      class="w-full h-full object-cover"
                    />
                  </div>
                </div>
              </div>
            </div>

            <div class="absolute inset-0 flex items-center justify-center z-10">
              <button
                class="w-20 h-20 rounded-full bg-primary/80 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity"
              >
                <i class="fa fa-play text-3xl ml-1"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 底部导航 - 移动端 -->
        <footer
          class="lg:hidden flex justify-around items-center h-16 bg-black/80 backdrop-blur fixed bottom-0 left-0 right-0 z-40 border-t border-gray-800"
        >
          <a
            href="#"
            class="flex flex-col items-center justify-center text-primary"
          >
            <i class="fa fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
          </a>
          <a
            href="#"
            class="flex flex-col items-center justify-center text-gray-400 hover:text-white transition-colors"
          >
            <i class="fa fa-compass text-xl"></i>
            <span class="text-xs mt-1">发现</span>
          </a>
          <button
            class="w-14 h-14 bg-primary rounded-full flex items-center justify-center -mt-8 shadow-lg"
          >
            <i class="fa fa-plus text-2xl"></i>
          </button>
          <a
            href="#"
            class="flex flex-col items-center justify-center text-gray-400 hover:text-white transition-colors"
          >
            <i class="fa fa-bell-o text-xl"></i>
            <span class="text-xs mt-1">通知</span>
          </a>
          <a
            href="#"
            class="flex flex-col items-center justify-center text-gray-400 hover:text-white transition-colors"
          >
            <i class="fa fa-user-o text-xl"></i>
            <span class="text-xs mt-1">我的</span>
          </a>
        </footer>
      </main>
    </div>

    <script>
      // 视频相关功能
      document.addEventListener("DOMContentLoaded", function () {
        const videoContainer = document.getElementById("video-container");
        const videoItems = document.querySelectorAll(".video-item");
        const playButtons = document.querySelectorAll(".video-item button");
        const likeButtons = document.querySelectorAll(".fa-heart-o, .fa-heart");

        // 模拟视频切换 - 实际项目中会替换为真实视频元素
        videoContainer.addEventListener("scroll", function () {
          // 检测当前可见的视频
          videoItems.forEach((item) => {
            const rect = item.getBoundingClientRect();
            const isVisible = rect.top <= 100 && rect.bottom >= 100;

            // 可见视频的进度条动画重置
            if (isVisible) {
              const progressBar = item.querySelector(".progress-animation");
              if (progressBar) {
                progressBar.style.animation = "none";
                progressBar.offsetHeight; // 触发重绘
                progressBar.style.animation = "progress 15s linear forwards";
              }
            }
          });
        });

        // 播放/暂停功能
        playButtons.forEach((button) => {
          button.addEventListener("click", function (e) {
            e.stopPropagation();
            const videoItem = this.closest(".video-item");
            const icon = this.querySelector("i");

            if (icon.classList.contains("fa-play")) {
              icon.classList.replace("fa-play", "fa-pause");
              // 实际项目中这里会播放视频
            } else {
              icon.classList.replace("fa-pause", "fa-play");
              // 实际项目中这里会暂停视频
            }
          });
        });

        // 点赞功能
        likeButtons.forEach((button) => {
          button.parentElement.addEventListener("click", function (e) {
            e.stopPropagation();
            const icon = this.querySelector("i");

            if (icon.classList.contains("fa-heart-o")) {
              icon.classList.replace("fa-heart-o", "fa-heart");
              icon.classList.add("text-primary", "animate-like");
              // 更新点赞数
              const countEl = this.parentElement.querySelector("span");
              if (countEl) {
                let count = parseFloat(countEl.textContent);
                if (countEl.textContent.includes("w")) {
                  count = count * 1000;
                  countEl.textContent = ((count + 1) / 1000).toFixed(1) + "w";
                } else {
                  countEl.textContent = (count + 1).toString();
                }
              }
            } else {
              icon.classList.replace("fa-heart", "fa-heart-o");
              icon.classList.remove("text-primary");
              // 更新点赞数
              const countEl = this.parentElement.querySelector("span");
              if (countEl) {
                let count = parseFloat(countEl.textContent);
                if (countEl.textContent.includes("w")) {
                  count = count * 1000;
                  countEl.textContent = ((count - 1) / 1000).toFixed(1) + "w";
                } else {
                  countEl.textContent = (count - 1).toString();
                }
              }
            }
          });
        });

        // 滑动切换视频
        let startY;
        let endY;

        videoContainer.addEventListener(
          "touchstart",
          function (e) {
            startY = e.touches[0].clientY;
          },
          false
        );

        videoContainer.addEventListener(
          "touchend",
          function (e) {
            endY = e.changedTouches[0].clientY;
            handleSwipe();
          },
          false
        );

        function handleSwipe() {
          const threshold = 50;
          const diff = endY - startY;

          // 向上滑动 - 下一个视频
          if (diff < -threshold) {
            const currentVideo = document.querySelector(
              ".video-item:nth-child(1)"
            );
            if (currentVideo) {
              currentVideo.scrollIntoView({ behavior: "smooth" });
            }
          }
          // 向下滑动 - 上一个视频
          else if (diff > threshold) {
            const prevVideo = document.querySelector(
              ".video-item:nth-child(1)"
            );
            if (prevVideo) {
              prevVideo.scrollIntoView({ behavior: "smooth" });
            }
          }
        }
      });
    </script>
  </body>
</html>
